<template>
    <div class="login-container">
        <div class="logo" />
        <div class="form">
            <h1>登录</h1>
            <el-card shadow="never" class="login-card">
                <!--登录表单-->
                <!-- el-form > el-form-item > el-input -->
                <el-form ref="formRef" :model="loginForm" :rules="loginRules">
                    <el-form-item prop="userAccount">
                        <el-input v-model="loginForm.userAccount" placeholder="请输入账号" />
                    </el-form-item>
                    <el-form-item prop="userPassword">
                        <el-input v-model="loginForm.userPassword" show-password placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item prop="isAgree">
                        <el-checkbox v-model="loginForm.isAgree"> 用户平台使用协议</el-checkbox>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 350px" type="primary" @click="login()">登录</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTokenStore } from '@/stores/token'
// import { useForm } from 'vee-validate'
import { ElMessage } from 'element-plus'
import router from '@/router/index.js'

const loginForm = ref({
    username: 'zhoujin',
    password: 'zj2142346965',
    isAgree: true,
})
const loginRules = ref({
    username: [
        {
            required: true,
            message: '请输入账号',
            trigger: 'blur',
        },
        {
            pattern: /^[a-zA-Z0-9_-]{3,16}$/,
            message: '账号格式不正确',
            trigger: 'blur',
        },
    ],
    userPassword: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
        },
        {
            min: 6,
            max: 16,
            message: '密码长度应该为6-16位之间',
            trigger: 'blur',
        },
    ],
    // required只能检测 null undefined ""
    isAgree: [
        {
            validator: (rule, value, callback) => {
                // rule校验规则
                // value 校验的值
                // callback 函数 - promise resolve reject
                // callback() callback(new Error(错误信息))
                value ? callback() : callback(new Error('您必须勾选用户的使用协议'))
            },
        },
    ],
})
import { adminLogin } from '@/api/user.js'
const formRef = ref()
const tokenStore = useTokenStore()
const login = () => {
    formRef.value.validate(async (isOK) => {
        if (isOK) {
            let result = await adminLogin(loginForm.value);
            ElMessage.success(result.message ? result.message : "登录成功");
            // 登录成功，设置token
            tokenStore.setToken(result.data)
            router.push('/layout');
        }
    })
}
</script>

<style lang="scss" scoped>
.login-container {
    display: flex;
    align-items: stretch;
    height: 100vh;

    .logo {
        flex: 3;
        background: rgba(38, 72, 176) url(@/assets/common/login_back.png) no-repeat center / cover;
        border-top-right-radius: 60px;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        padding: 0 100px;

        .icon {
            background: url(@/assets/common/logo.png) no-repeat 70px center / contain;
            width: 300px;
            height: 50px;
            margin-bottom: 50px;
        }

        p {
            color: #fff;
            font-size: 18px;
            margin-top: 20px;
            width: 300px;
            text-align: center;
        }
    }

    .form {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 176px;

        .el-card {
            border: none;
            padding: 0;
        }

        h1 {
            padding-left: 20px;
            font-size: 24px;
        }

        .el-input {
            width: 350px;
            height: 44px;

            .el-input__inner {
                background: #f4f5fb;
            }
        }

        .el-checkbox {
            color: #606266;
        }
    }
}
</style>
